import {Card, Col, Row,Image} from "antd";
import {PieChartOutlined, UserOutlined} from "@ant-design/icons";

export default ({type,title,width}:{type:'news'|'app'|'card',title: string,width?: string|number})=>{
  return (
    <Card size='small' title={title} style={{width:width || '100%',marginTop:16,background:'transparent'}}>
      {
        type === 'app'? (
          <Row gutter={16}>
            {
              ['','','','','','','','','',''].map((_,index)=>(
                <Col span={12} key={index}>
                  <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    padding:'4px 8px',
                    backgroundColor:'#f1f3f6',
                    marginBottom:8,
                    borderRadius:4,
                    cursor:'pointer'
                  }}>
                    <Image preview={false} style={{width:20}} src='https://ai-bot.cn/wp-content/uploads/2023/08/doubao-icon.png' />
                    <div style={{marginLeft:4,color:'rgb(40,42,45)',fontSize:12}}>豆包</div>
                  </div>
                </Col>
              ))
            }
          </Row>
        ) : type === 'news'? (
          (
            <Row gutter={16}>
              {
                ['','','','','','','','','',''].map((_,index)=>(
                  <Col span={24} key={index}>
                    <div style={{display:'flex',marginBottom:16}}>
                      <div style={{borderRadius:4,width:90,minWidth:90,backgroundImage:'url(https://ai-bot.cn/wp-content/uploads/2025/08/HeyPhoto-website.png)',backgroundSize:'100% 100%'}} />
                      <div style={{width:16}} />
                      <div>
                        <h3 style={{
                          overflow:'hidden',
                          textOverflow:'ellipsis',
                          wordBreak:'break-all',
                          display:'-webkit-box',
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: "vertical",
                          fontSize:14,
                          fontWeight:'normal',
                          color:'#282a2d',
                        }}>HeyPhoto – AI照片编辑工具，轻松改变人物面部特征轻松改变人物面部特征轻松改变人物面部特征</h3>
                        <div style={{
                          color:'#6c757d',
                          fontSize:12,
                        }}>23小时前</div>
                      </div>
                    </div>
                  </Col>
                ))
              }
            </Row>
          )
        ):type==='card' ? (
          <Row gutter={16}>
            {
              ['','','','','','','','','',''].map((_,index)=>(
                <Col span={8} key={index}>
                  <div style={{marginBottom:16}}>
                    <Image preview={false} src='https://ai-bot.cn/wp-content/uploads/2023/06/ai-news-june-ep-03.png' style={{transition:'all .3s ease',borderRadius:4,boxShadow:'0 0 20px -5px rgba(20, 20, 20, .2)'}} />
                    <div style={{width:16}} />
                    <div>
                      <h3 style={{
                        overflow:'hidden',
                        textOverflow:'ellipsis',
                        wordBreak:'break-all',
                        display:'-webkit-box',
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: "vertical",
                        fontSize:16,
                        fontWeight:'normal',
                        color:'#282a2d',
                      }}>HeyPhoto – AI照片编辑工具，轻松改变人物面部特征轻松改变人物面部特征轻松改变人物面部特征</h3>
                      <div style={{
                        color:'#6c757d',
                        fontSize:12,
                        display:'flex',
                        justifyContent:'space-between',
                      }}>
                        <div>
                          <UserOutlined /> AI小集
                        </div>
                        <div>
                          <PieChartOutlined /> 17
                        </div>
                      </div>
                    </div>
                  </div>
                </Col>
              ))
            }
          </Row>
        ):null
      }

    </Card>
  )
}
